Basic Setup
Ensure that your application has the following peer dependencies installed:
npm install @mui/material cw/rds @mui/icons-material @reduxjs/toolkit react-redux react-router-dom
Importing Components
WorkForms provides two primary components:
import { FormBuilder, FormGenerator } from '@cw/cherrywork-workforms';
You may also import them individually:
import FormBuilder from '@cw/cherrywork-workforms/FormBuilder';
import FormGenerator from '@cw/cherrywork-workforms/FormGenerator';
Translation Support
To enable translation and multilingual capabilities, install the Work Text library:
npm install @cw/work-text
IDM Support
Global Field Catalog configured in IDM can be used to derive the field properties by choosing a supported field catalog in field settings.
Rules configured in IDM can be used to along with Field Catalogs.
Workforms also provides the IDM admin pannel by installing the below libraries:
npm install @cw/global-field-catalog @cw/idm
Use the gfcFields props to pass the Field Catalogs to be used in the form.
Use idmApplication prop to pass the configured IDM application detail to execute the IDM Rules.
<FormBuilder
...other props
gfcFields={placeholderFieldCatalog}
idmApplication={idmApplicationDetails}
/>
Supported Props
| Property | Type | Required | Description |
|---|---|---|---|
| formProperties | Object | Yes | Form configuration including formId, formTitle, sourceId, etc. |
| formHeaderProperties | Object | No | Header-level properties like logo, navigation, theme settings |
| components | Array | No | Pre-built form components/fields |
| token | String | Yes | Authentication token for API calls |
| userDetails | Object | Yes | Current user information |
| destinations | Array | Yes | API destination configurations |
| isLoading | Boolean | Yes | Set to false initially; required in FormBuilder for Loading state indicator |
| autoPopulate | Boolean | No | Auto-populate fields from data source |
| onSubmit | Function | Yes | Callback function on form submission |
| features | Object | No | Flags for conditional rendering (header bar with save, submit, preview buttons) |
| useConfigServerDestination | Boolean | No | Use configuration server for destinations |
| signatureConfig | Object | No | Configuration for digital signature |
| handleClickBack | Function | No | Callback function on back button click in Header |
| requireAttribute | Boolean | No | Show/hide DataSet and attribute section; default is false; allows manual dataset/attribute configuration |
| gfcFields | Array | No | Global field catalogs to be used in form |
| idmApplication | Object | No | Application created in IDM |